<template>
  <div class="goodsChannel">
    <el-dialog
      title="货道设置"
      :visible="dialogVisibleGoods"
      @close="dialogVisibleGoodsClose"
      width="50%"
      custom-class="classRadius"
    >
      <div class="inner">
        <div class="arrow" :style="{ display: channelTitle.vmCol <= 5 ? 'none' : '' }">
          <i
            :class="['iconfont', 'el-icon-arrow-left', activeItem === '0' ? 'activeColor' : '']"
            @click="changePage('0')"
          ></i>
          <i
            :class="['iconfont', 'el-icon-arrow-right', activeItem === '0' ? '' : 'activeColor']"
            @click="changePage('1')"
          ></i>
        </div>
        <el-row class="title" type="flex" justify="center" align="middle" style="height: 56px">
          <el-col :span="4">货道行数:&nbsp;&nbsp;{{ channelTitle.vmRow }}</el-col>
          <el-col :span="4">货道列数:&nbsp;&nbsp;{{ channelTitle.vmCol }}</el-col>
          <el-col :span="10">货道容量(个):&nbsp;&nbsp;{{ channelTitle.channelMaxCapacity }}</el-col>
          <el-col :span="4"
            ><el-button type="primary" @click="arrangeGoods">智能排货</el-button></el-col
          >
        </el-row>
        <div class="slider">
          <div
            :class="['vmItem', activeItem === '0' ? '' : 'amition']"
            :style="{ width: channelTitle.vmCol <= 5 ? '850px' : '1700px'  }"
          >
            <div class="minItem" v-for="item in goodsChannelList" :key="item.sign">
              <div class="subitem" v-for="sub in item.children" :key="sub.channelCode">
                <span class="sub">{{ sub.channelCode }}</span>
                <div class="pic">
                  <div class="picture">
                    <img :src="sub.sku.skuImage" v-if="sub.sku" />
                    <img src="../../../assets/logo.png" v-else />
                  </div>
                  <div class="title" v-if="sub.sku">{{ sub.sku.skuName }}</div>
                  <div class="title" v-else>{{ '暂无商品' }}</div>
                </div>
                <div class="fonction">
                  <span class="add" @click="addGoods(sub)">添加</span>
                  <span class="del">删除</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <el-row type="flex" justify="center" align="middle" style="height: 56px">
          <el-button type="warning" @click="confirmAllGoods">确认</el-button>
        </el-row>
      </div>
      <el-dialog
        title="智能排货"
        :visible="dialogVisibleArrange"
        @close="dialogVisibleArrangeClose"
        width="47%"
        custom-class="classRadius"
        append-to-body
      >
        <el-row>该区域属于{{ businessName }}商圈,适合销售以下商品：</el-row>
        <el-row class="row">
          <div class="subitem" v-for="item in arrangeList" :key="item.skuId">
            <div class="pic">
              <div class="picture">
                <img :src="item.image" />
              </div>
              <div class="title">{{ item.skuName }}</div>
            </div>
          </div>
        </el-row>
        <el-row type="flex" justify="center" align="middle" style="height: 56px">
          <el-button type="warning" @click="useSuggest">采纳建议</el-button>
        </el-row>
      </el-dialog>
      <el-dialog
        title="选择商品"
        :visible="dialogVisibleChoose"
        @close="dialogVisibleChooseClose"
        @open="dialogVisibleChooseOpen"
        width="50%"
        custom-class="classRadius"
        append-to-body
      >
        <div class="inner">
          <i
            :class="[
              'iconfont',
              'el-icon-arrow-left',
              addParams.pageIndex === 1 ? 'activeColor' : ''
            ]"
            @click="changeChose(false)"
          ></i>
          <i
            :class="[
              'iconfont',
              'el-icon-arrow-right',
              addGoodsList.length === 10 ? '' : 'activeColor'
            ]"
            @click="changeChose(true)"
          ></i>
          <el-form ref="searchRef" :model="searchForm" label-width="120px">
            <el-form-item label="请输入商品名称:">
              <el-input
                width="300px"
                v-model="searchForm.name"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchSubmit">查询</el-button>
          </el-form>
          <el-row class="row">
            <div
              class="subitem"
              v-for="item in addGoodsList"
              :key="item.skuId"
              @click="chooseItem(item)"
            >
              <div class="pic">
                <div class="picture">
                  <img :src="item.skuImage" />
                </div>
                <div class="title">{{ item.skuName }}</div>
              </div>
              <div class="sign" :style="{ display: checkedSkuId === item.skuId ? '' : 'none' }">
                <img src="../../../assets/images/checked.png" alt="" />
              </div>
            </div>
          </el-row>
          <el-row type="flex" justify="center" align="middle" style="height: 56px">
            <el-button type="warning" @click="confirmImage">确认</el-button>
          </el-row>
        </div>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import {
  equipmentTypeAPI,
  goodsChannelListAPI,
  getArrangeAPI,
  businessTopAPI,
  searchGoodsAPI,
  channelConfigAPI
} from '@/api'
// 数据处理函数
import { findSameArray } from '@/plugins/handelData.js'
export default {
  name: 'GoodsChannel',
  data() {
    return {
      // $BUS传过来的值接收
      recesiveInfo: {
        vmType: '',
        innerCode: '',
        businessId: '' // 商圈id
      },
      dialogVisibleGoods: false,
      dialogVisibleArrange: false,
      dialogVisibleChoose: false,
      activeItem: '0',
      // 表头内容
      channelTitle: {
        vmCol: '',
        vmRow: '',
        channelMaxCapacity: ''
      },
      // 原始详情列表
      originList: [],
      // 详情列表
      goodsChannelList: [],
      // 商圈名字
      businessName: '',
      // 智能排货获取数据list
      arrangeList: [],
      searchForm: {
        name: ''
      },
      // 添加商品的数据列表
      addParams: {
        pageIndex: 1,
        pageSize: 10
      },
      // 添加商品渲染列表
      addGoodsList: [],
      // 具体哪个需要添加的标识符
      specificChannelCode: '',
      // 添加商品的唯一标识符:
      checkedSkuId: '',
      // 选择中图片的渲染
      checkedImage: '',
      // 上传数据的渲染
      AddGoodsParams: {
        innerCode: '',
        channelList: []
      }
    }
  },
  methods: {
    // 动画框
    changePage(value) {
      this.activeItem = value
    },
    // 添加商品的选择中对象
    chooseItem(item) {
      console.log(item)
      this.checkedSkuId = item.skuId
      this.checkedImage = item.skuImage
    },
    // 添加商品的确认事件
    async confirmImage() {
      this.AddGoodsParams.channelList.forEach((item) => {
        if (item.channelCode === this.specificChannelCode) {
          item.skuId = this.checkedSkuId
        }
      })
      this.dialogVisibleChoose = false
      await channelConfigAPI(this.AddGoodsParams)
      this.fetchEquipmentType()
      // await channelConfigAPI(this.AddGoodsParams)
    },
    // 关闭弹窗
    dialogVisibleGoodsClose() {
      this.activeItem = '0'
      this.dialogVisibleGoods = false
    },
    // 获取售货机类型详情
    async fetchEquipmentType() {
      const res = await equipmentTypeAPI(this.recesiveInfo.vmType)
      this.channelTitle = res.data
      const res2 = await goodsChannelListAPI(this.recesiveInfo.innerCode)
      this.originList = res2.data
      console.log(this.originList)
      this.originList.forEach((item) => {
        this.$set(item, 'sign', item.channelCode.split('-')[0]) // 方便生成层级数据
        this.AddGoodsParams.channelList.push({ channelCode: item.channelCode, skuId: item.skuId }) // 方便发送请求
      })
      this.goodsChannelList = findSameArray(res2.data, 'sign')
      console.log(this.goodsChannelList)
      // console.log(this.AddGoodsParams.channelList)
    },
    // 智能排货
    async arrangeGoods() {
      const res = await getArrangeAPI(this.recesiveInfo.businessId)
      this.businessName = res.data
      const res2 = await businessTopAPI(this.recesiveInfo.businessId)
      this.arrangeList = res2.data
      // console.log(res2.data)
      this.dialogVisibleArrange = true
    },
    // 智能排货弹窗关闭区
    dialogVisibleArrangeClose() {
      this.dialogVisibleArrange = false
    },
    // 采纳建议
    useSuggest() {
      this.dialogVisibleArrange = false
    },
    // 查询商品
    searchSubmit() {
      console.log(this.searchForm.name)
    },
    // 添加功能
    addGoods(sub) {
      this.specificChannelCode = sub.channelCode
      this.dialogVisibleChoose = true
    },
    // 添加功能弹窗的回调
    async dialogVisibleChooseOpen() {
      const res = await searchGoodsAPI(this.addParams)
      console.log(res.data)
      this.addGoodsList = res.data.currentPageRecords
    },
    // 添加商品的关闭功能
    dialogVisibleChooseClose() {
      this.dialogVisibleChoose = false
      this.addGoodsList = []
      this.addParams = {
        pageIndex: 1,
        pageSize: 10
      }
    },
    // 选择商品的页面跳转
    changeChose(type) {
      if (type) {
        if (this.addGoodsList.length === 10) this.addParams.pageIndex++
      } else {
        if (this.addParams.pageIndex > 1) this.addParams.pageIndex--
      }
    },
    // 选择商品的确认事件
    async confirmAllGoods() {
      try {
        await channelConfigAPI(this.AddGoodsParams)
        this.$emit('refreshPage')
        this.dialogVisibleGoods = false
      } catch (error) {
        return Promise.reject(error)
      }
    }
  },
  watch: {
    addParams: {
      handler() {
        this.dialogVisibleChooseOpen()
      },
      deep: true
    }
  },
  mounted() {
    this.$bus.$on('goodsChannelFn', (value) => {
      this.recesiveInfo = value
      this.AddGoodsParams.innerCode = value.innerCode
      this.dialogVisibleGoods = true
      this.fetchEquipmentType()
    })
  },
  beforeDestroy() {
    this.$bus.$off() // 销毁所有全局事件
  }
}
</script>

<style lang="less" scoped>
/deep/.el-dialog__title {
  font-size: 16px;
  font-weight: 600;
}
.inner {
  padding: 0 30px;
  position: relative;
  width: 100%;
  .el-form {
    display: flex;
    /deep/.el-button--primary {
      height: 38px;
      margin-left: 10px;
    }
  }
  .iconfont {
    position: absolute;
    width: 40px;
    height: 60px;
    font-size: 50px;
    text-align: center;
    z-index: 999;
    cursor: pointer;
  }
  .activeColor {
    color: rgb(204, 204, 204);
  }
  .el-icon-arrow-left {
    top: 45%;
    left: -2%;
  }
  .el-icon-arrow-right {
    top: 45%;
    right: -2%;
  }
  .title {
    background-color: rgb(248, 247, 247);
  }
  .slider {
    width: 100%;
    height: 400px;
    overflow: hidden;
    overflow-y: scroll;
    .vmItem {
      transition: all 0.7s;
      .minItem {
        display: flex;
        .subitem {
          width: 150px;
          position: relative;
          height: 180px;
          margin: 10px;
          border-radius: 5px;
          box-shadow: 1px 1px 10px rgb(241, 241, 241);
          .pic {
            height: 135px;
            width: 100%;
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: rgb(247, 242, 242);
            .picture {
              width: 84px;
              height: 78px;
              margin-top: 20px;
              img {
                width: 100%;
              }
            }
            .title {
              margin-top: 10px;
            }
          }
          .sub {
            position: absolute;
            top: 10px;
            left: 0;
            width: 43px;
            height: 23px;
            line-height: 23px;
            background: #829bed;
            border-radius: 0 10px 10px 0;
            font-size: 12px;
            color: #fff;
          }
          .fonction {
            margin-top: 10px;
            text-align: center;
            .add {
              width: 90px;
              color: #4491fd;
              margin-right: 15px;
              cursor: pointer;
            }
            .del {
              width: 90px;
              color: brown;
              cursor: pointer;
            }
          }
        }
      }
    }
    .amition {
      transform: translateX(-50%);
    }
  }
}
.row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  // padding: 15px 0 0 10px;
  .subitem {
    width: 150px;
    position: relative;
    height: 150px;
    margin: 10px;
    border-radius: 5px;
    box-shadow: 1px 1px 10px rgb(241, 241, 241);
    background-color: rgb(247, 242, 242);
    .sign {
      position: absolute;
      top: 0;
      left: 0;
    }
    .pic {
      height: 135px;
      width: 100%;
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .picture {
        width: 60px;
        height: 70px;
        margin-top: 20px;
        img {
          width: 100%;
        }
      }
      .title {
        margin-top: 20px;
      }
    }
  }
}
</style>
